{include file="public/header" $title="角色管理" /}
    <style>
        #editBox{
            width: 400px;display: none;
        }
        #roleBox{
            display: none;
        }
    </style>
</header>
<body>

<div class="layui-btn-group my-toolbar">
    <button class="layui-btn layui-bg-blue" data-type="addrole">添加角色</button>
    <button class="layui-btn layui-bg-red" data-type="getCheckData">批量删除</button>
</div>

<script type="text/html" id="switchTpl">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="开|关" lay-filter="statusDemo" {{ d.status==1 ? 'checked' : '' }}>
</script>

<table class="layui-hide" id="table" lay-filter="table"></table>

<!--角色所属管理员成员开始-->
<script type="text/html" id="member">
    {{# if(d.member){ }}
    {{# for(var i=0;i< d.member.length;i++){ }}
    <span data-id="{{d.member[i].id}}"  lay-event="memberClick" class="layui-btn layui-btn-xs {{ d.member[i].status == 1? 'layui-btn-norma' : 'layui-btn-primary'}}">{{d.member[i].username}}</span>
    {{# }}}
    {{# }}}
</script>
<!--角色所属管理员成员结束-->

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="roleAllot">分配权限</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--弹框开始-->
<div id="editBox">
    <form class="layui-form" action="" style="height: 100%;margin-top: 30px">
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <input type="text" name="role" lay-verify="title|required" autocomplete="off" placeholder="请输入角色" class="layui-input" maxlength="16">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="ON|OFF" id="status">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="gosub" type="button">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <input type="hidden" value="" name="id">
    </form>
</div>
<!--弹框结束-->

<!--权限分配开始-->
<div id="roleBox">
    <form class="layui-form" action="" lay-filter="form">
        <div class="layui-form-item">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <tbody id="menuListBox">

                </tbody>
            </table>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="subRoleAllot">立即提交</button>
            </div>
        </div>
        <input type="hidden" name="isSuper" value="">
        <input type="hidden" name="id" value="" id="roleId">
    </form>

</div>
<!--权限分配结束-->
</body>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;

        table.render({
            elem: '#table'
            ,url:"{:url('nadmin/role/getRoleList')}"
            ,title:'系统菜单'
            ,cols: [[
                {type:'checkbox', fixed: 'left'}
                ,{field:'id', width:80, title: 'ID',unresize: true, sort: true,align:'center'}
                ,{field:'role', width:200, title: '角色',align:'center'}
                ,{field:'member',  title: '成员',align:'center',templet:'#member'}
                ,{field:'status', width:150, title: '状态',templet: '#switchTpl', unresize: true,align:'center'}
                ,{fixed: 'right', title:'操作',width:200, align:'center', toolbar: '#barDemo'}
            ]]
            ,page: true
            ,limit:10
            ,id:'roleTable'
            ,loading:true

        });
        //监听表格复选框选择
        /*table.on('checkbox(books)', function(obj){
         console.log(obj)
         });*/
        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('roleTable')
                        ,data = checkStatus.data;
                //将选择的对象id收集
                var idArr = [];
                $(data).each(function(index,element){
                    idArr[index] =  element.id;
                })

                if(idArr){
                    var idStr = idArr.join(',')
                    //二次询问
                    layer.msg('你确定全部删除么？', {
                        time: 0 //不自动关闭
                        ,btn: ['必须啊', '想一哈']
                        ,yes: function(index){
                            layer.close(index);
                            $.post("{:url('nadmin/role/delMore')}",{idStr:idStr},function(datas){
                                if(datas.status==1){
                                    layer.msg(datas.msg,{icon:1})
                                    //刷新
                                    table.reload('roleTable', {});
                                }else{
                                    layer.msg(datas.msg,{icon:2})
                                }
                            },'json');
                        }
                    });
                }else{
                    //没有数据
                    layer.msg('请先选择数据',{icon:5})
                }
            },

            //添加菜单
            addrole:function()
            {

                $('[name="role"]').val("");
                $('[name="id"]').val("");
                $('#status').attr("checked",false)

                form.render() //刷新表单
                layer.open({
                    type:1,
                    title:'添加菜单',
                    area: ['410px', '300px'],
                    skin:'layui-layer-rim',//加上边框
                    content:$("#editBox")
                })
            }

        };

        $('.my-toolbar .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //表单验证



        //监听行工具事件
        table.on('tool(table)', function(obj){

            var data = obj.data;
            var id = data.id;
            var title = data.role;
            //删除一条记录
            if(obj.event === 'del'){
                layer.confirm('真的删除此行么', function(index){
                    $.post("{:url('nadmin/role/delOne')}",{id:id},function(datas){
                        if(datas.status==1){
                            layer.msg(datas.msg,{icon:1});
                            obj.del();
                            layer.close(index);
                        }else {
                            layer.msg(datas.msg,{icon:2});
                        }
                    },'json')

                });
            } else if(obj.event === 'edit'){
                    $('[name="role"]').val(data.role);
                    $('[name="id"]').val(data.id);
                    if(data.status == 1){
                        $('#status').attr("checked",true)
                    }else{
                        $('#status').attr("checked",false)
                    }
                    form.render() //刷新表单
                    layer.open({
                        type:1,
                        title:'编辑菜单',
                        area: ['410px', '300px'],
                        skin:'layui-layer-rim',//加上边框
                        content:$("#editBox")
                    })
            }else if(obj.event === 'roleAllot'){
                //权限分配
                layer.open({
                    type:1,
                    title:'权限分配【'+title +'】',
                    area:['100%','100%'],
                    skin:'layui-layer-rim',
                    content:$("#roleBox")
                })
                $.post("{:url('nadmin/role/getMenuTree')}",{id:id},function(obj){
                    if(obj.status == 1)
                    {
                        //先初始化
                        $("#menuListBox").children().remove();
                        var data = obj.data;
                        var html = "";
                        for(var i=0;i<data.length;i++) {
                            var sonLength = data[i].son == undefined ? 1 : data[i].son.length;//son中元素的个数
                            html += '<tr>';
                            html += '    <td rowspan="'+sonLength+'"><input lay-filter="menu" class="menu_'+data[i].pid+'" data-lev="'+data[i].lev+'" data-pid="'+data[i].pid+'" type="checkbox" name="menu[]" value="'+data[i].id+'" title="'+data[i].title+'" lay-skin="primary"';
                            if(data[i].status == 1)
                            {
                                html += "checked";
                            }
                            html += '></td>'; //第一级菜单
                            if(data[i].son != undefined)
                            {
                                html += '    <td><input lay-filter="menu" id="a" class="menu_'+data[i].son[0].pid+'" data-lev="'+data[i].son[0].lev+'" data-pid="'+data[i].son[0].pid+'" type="checkbox" name="menu[]" value="'+data[i].son[0].id+'" title="'+data[i].son[0].title+'" lay-skin="primary"'; //第二级菜单 第一个元素
                                if(data[i].son[0].status == 1)
                                {
                                    html += "checked";
                                }
                                html += '></td>';
                                html += '    <td>';
                                if(data[i].son[0].son != undefined)
                                {
                                    var lev2son = data[i].son[0].son;

                                    for(var k=0;k<lev2son.length;k++)
                                    {
                                        html += '<input lay-filter="menu" type="checkbox" name="menu[]" class="menu_'+lev2son[k].pid+'" data-lev="'+lev2son[k].lev+'" data-pid="'+lev2son[k].pid+'" value="'+lev2son[k].id+'" title="'+lev2son[k].title+'" lay-skin="primary" '; //第三级菜单 第一个第二级菜单的所有下属成员菜单
                                        if(lev2son[k].status == 1)
                                        {
                                            html += "checked";
                                        }
                                        html += '>';
                                    }

                                }
                                html += '    </td>';
                            }else{
                                html += '    <td></td>';//无子元素 放空
                                html += '    <td></td>';//无子元素 放空
                            }

                            html += '</tr>';

                            if(sonLength > 1)
                            {
                                for(var j=1;j<sonLength;j++) {
                                    html += '<tr>';
                                    html += '    <td><input lay-filter="menu" class="menu_'+data[i].son[j].pid+'" data-lev="'+data[i].son[j].lev+'" data-pid="'+data[i].son[j].pid+'" type="checkbox" name="menu[]" value="'+data[i].son[j].id+'" title="'+data[i].son[j].title+'" lay-skin="primary" '; //第二级菜单 第一个元素之外的所有元素
                                    if(data[i].son[j].status == 1)
                                    {
                                        html += "checked";
                                    }
                                    html += '></td>';
                                    html += '    <td>';
                                    if(data[i].son[j].son != undefined)
                                    {
                                        var lev2son_1 = data[i].son[j].son;

                                        for(var k=0;k<lev2son_1.length;k++)
                                        {
                                            html += '    <input lay-filter="menu" class="menu_'+lev2son_1[k].pid+'" data-lev="'+lev2son_1[k].lev+'" data-pid="'+lev2son_1[k].pid+'" type="checkbox" name="menu[]" value="'+lev2son_1[k].id+'" title="'+lev2son_1[k].title+'" lay-skin="primary" '; //第三级菜单 第一个第二级菜单之外的所有下属成员菜单
                                            if(lev2son_1[k].status == 1)
                                            {
                                                html += "checked";
                                            }
                                            html += '>';
                                        }

                                    }
                                    html += '    </td>';
                                    html += '</tr>';
                                }
                            }

                        }
                        $("#menuListBox").append(html)
                        $("#roleId").val(id);
                        form.render();
                    }
                },'json');

            }else if(obj.event ==='memberClick')
            {
                var that = 2
                var adminerId = this.dataset.id  //管理员ID

                var btnHML = '<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="delMember('+adminerId+')">移除角色</button>';
                layer.tips(btnHML, $(this), {
                    tips: [1, '#cccccc'],
                    time:3000
                });

            }
        });

        //监听状态操作
        form.on('switch(statusDemo)', function(obj){
            var that = this;
            if(!this.value){
                layer.msg('参数异常',{icon:2});
            }
            if(obj.elem.checked){
                var status = 1;
            }else{
                var status = 0;
            }
            $.post("{:url('index/role/changeStatus')}",{id:this.value,status:status},function(datas){
                layer.msg(datas.msg,{time:1000},function(){
                    table.reload('roleTable', {}); //表格重载
                });
            },'json')
        });

        //添加或编辑操作
        form.on('submit(gosub)',function(data){

            if(data.field.status == 'on'){
                data.field.status = 1;
            }else{
                data.field.status = 0;
            }

            if(data.field.id)
            {
                var url = "{:url('nadmin/role/doEdit')}";
            }else{
                var url = "{:url('nadmin/role/doAdd')}";
            }
            $.post(url,data.field,function(datas){
                layer.msg(datas.msg,{time:1000},function(){
                    if(datas.status == 1){
                        //关闭弹框
                        layer.closeAll()
                        table.reload('roleTable', {}); //表格重载
                    }
                });
            },'json')
        })

        //权限分配提交
        form.on('submit(subRoleAllot)',function(data){
           // console.log(data.field);return;
            $.post("{:url('nadmin/role/roleAllot')}",data.field,function(datas){
                layer.msg(datas.msg,{time:1000},function(){
                    if(datas.status == 1)
                    {
                        layer.closeAll();
                    }
                })
            },'json')
        })

        //监听权限分配复选框事件
        form.on('checkbox(menu)',function(data){
            //该元素的等级
            var id = data.value;
            var lev = data.elem.dataset.lev;
            var checked = data.elem.checked;  //是否选中，选中为true  未选中false
            var pid = data.elem.dataset.pid;


            form.render();
            if(checked)
            {
                //选中操作  子元素选中，父级若未选中，将自动选中
                //父元素是否选中 未选中的话，进行选中操作
                if(!$('[value="'+pid+'"]').prop("checked") && lev == 3)
                {
                    var ppid = $('[value="'+pid+'"]').data("pid");
                    $('[value="'+pid+'"]').prop("checked",true); //父级选中
                    $('[value="'+ppid+'"]').prop("checked",true); //祖父级选中
                }else if(!$('[value="'+pid+'"]').prop("checked") && lev == 2)
                {
                    $('[value="'+pid+'"]').prop("checked",true);//父级选中
                }

            }else{
                //未选中操作 如果该元素等级为3 无子元素操作，等级为2 ，所属等级为3的操作。等级为1 所属等级为2，为3的操作  ,只有未选中时所有子元素全部未选中
                if(lev == 2)
                {
                    $(".menu_"+id).prop("checked",false); //子元素未选中
                }else if(lev == 1)
                {
                    $(".menu_"+id).prop("checked",false); //子元素未选中
                    //第三级元素 未选中
                    $(".menu_"+id).each(function(index,ele){
                        $(".menu_"+ele.value).prop("checked",false);
                    })
                }
            }

            form.render();
           // console.log(checked)
        })
    });
    //点击管理员操作 -- 移除角色
    function delMember(id)
    {
        if(id)
        {
            $.post("{:url('nadmin/Adminer/editRoleOne')}",{id:id,role_id:0},function(obj){
                layer.msg(obj.msg,{},function(){
                    if(obj.status == 1)
                    {
                        table.reload('roleTable', {}); //表格重载
                    }
                });

            },'json')
        }
    }
</script>
</html>